.bg{
  // 背景图像重复
  &-repeat{background-repeat: repeat;}
  &-no-repeat{background-repeat: no-repeat;}
  &-repeat-x{background-repeat: repeat-x;}
  &-repeat-y{background-repeat: repeat-y;}
  &-repeat-round{background-repeat: round;}
  &-repeat-space{background-repeat: space;}

  // 背景图像大小
  &-auto{background-size: auto;}
  &-cover{background-size: cover;}
  &-contain{background-size: contain;}

  // 背景图像固定
  &-fixed{background-attachment: fixed;}
  &-local{background-attachment: local;}
  &-scroll{background-attachment: scroll;}

  // 背景图像裁剪
  &-clip-border{background-clip: border-box;}
  &-clip-padding{background-clip: padding-box;}
  &-clip-content{background-clip: content-box;}
  &-clip-text{background-clip: text;
    -webkit-background-clip: text;}

  // 背景颜色
  &-transparent{background-color: transparent;}
  &-current{background-color: currentColor;}
  &-black {--tw-bg-opacity: 1;background-color: rgba(0, 0, 0, var(--tw-bg-opacity));}
  &-white{--tw-bg-opacity: 1;background-color: rgba(255, 255, 255, var(--tw-bg-opacity));}
  &-gray-50{--tw-bg-opacity: 1;background-color: rgba(249, 250, 251, var(--tw-bg-opacity));}
  &-gray-100{--tw-bg-opacity: 1;background-color: rgba(243, 244, 246, var(--tw-bg-opacity));}
  &-gray-200{--tw-bg-opacity: 1;background-color: rgba(229, 231, 235, var(--tw-bg-opacity));}
  &-gray-300{--tw-bg-opacity: 1;background-color: rgba(209, 213, 219, var(--tw-bg-opacity));}
  &-gray-400{--tw-bg-opacity: 1;background-color: rgba(156, 163, 175, var(--tw-bg-opacity));}
  &-gray-500{--tw-bg-opacity: 1;background-color: rgba(107, 114, 128, var(--tw-bg-opacity));}
  &-gray-600{--tw-bg-opacity: 1;background-color: rgba(75, 85, 99, var(--tw-bg-opacity));}
  &-gray-700{--tw-bg-opacity: 1;background-color: rgba(55, 65, 81, var(--tw-bg-opacity));}
  &-gray-800{--tw-bg-opacity: 1;background-color: rgba(31, 41, 55, var(--tw-bg-opacity));}
  &-gray-900{--tw-bg-opacity: 1;background-color: rgba(17, 24, 39, var(--tw-bg-opacity));}
  &-red-50{--tw-bg-opacity: 1;background-color: rgba(254, 242, 242, var(--tw-bg-opacity));}
  &-red-100{--tw-bg-opacity: 1;background-color: rgba(254, 226, 226, var(--tw-bg-opacity));}
  &-red-200{--tw-bg-opacity: 1;background-color: rgba(254, 202, 202, var(--tw-bg-opacity));}
  &-red-300{--tw-bg-opacity: 1;background-color: rgba(252, 165, 165, var(--tw-bg-opacity));}
  &-red-400{--tw-bg-opacity: 1;background-color: rgba(248, 113, 113, var(--tw-bg-opacity));}
  &-red-500{--tw-bg-opacity: 1;background-color: rgba(239, 68, 68, var(--tw-bg-opacity));}
  &-red-600{--tw-bg-opacity: 1;background-color: rgba(220, 38, 38, var(--tw-bg-opacity));}
  &-red-700{--tw-bg-opacity: 1;background-color: rgba(185, 28, 28, var(--tw-bg-opacity));}
  &-red-800{--tw-bg-opacity: 1;background-color: rgba(153, 27, 27, var(--tw-bg-opacity));}
  &-red-900{--tw-bg-opacity: 1;background-color: rgba(127, 29, 29, var(--tw-bg-opacity));}
  &-yellow-50{--tw-bg-opacity: 1;background-color: rgba(255, 251, 235, var(--tw-bg-opacity));}
  &-yellow-100{--tw-bg-opacity: 1;background-color: rgba(254, 243, 199, var(--tw-bg-opacity));}
  &-yellow-200{--tw-bg-opacity: 1;background-color: rgba(253, 230, 138, var(--tw-bg-opacity));}
  &-yellow-300{--tw-bg-opacity: 1;background-color: rgba(252, 211, 77, var(--tw-bg-opacity));}
  &-yellow-400{--tw-bg-opacity: 1;background-color: rgba(251, 191, 36, var(--tw-bg-opacity));}
  &-yellow-500{--tw-bg-opacity: 1;background-color: rgba(245, 158, 11, var(--tw-bg-opacity));}
  &-yellow-600{--tw-bg-opacity: 1;background-color: rgba(217, 119, 6, var(--tw-bg-opacity));}
  &-yellow-700{--tw-bg-opacity: 1;background-color: rgba(180, 83, 9, var(--tw-bg-opacity));}
  &-yellow-800{--tw-bg-opacity: 1;background-color: rgba(146, 64, 14, var(--tw-bg-opacity));}
  &-yellow-900{--tw-bg-opacity: 1;background-color: rgba(120, 53, 15, var(--tw-bg-opacity));}
  &-green-50{--tw-bg-opacity: 1;background-color: rgba(236, 253, 245, var(--tw-bg-opacity));}
  &-green-100{--tw-bg-opacity: 1;background-color: rgba(209, 250, 229, var(--tw-bg-opacity));}
  &-green-200{--tw-bg-opacity: 1;background-color: rgba(167, 243, 208, var(--tw-bg-opacity));}
  &-green-300{--tw-bg-opacity: 1;background-color: rgba(110, 231, 183, var(--tw-bg-opacity));}
  &-green-400{--tw-bg-opacity: 1;background-color: rgba(52, 211, 153, var(--tw-bg-opacity));}
  &-green-500{--tw-bg-opacity: 1;background-color: rgba(16, 185, 129, var(--tw-bg-opacity));}
  &-green-600{--tw-bg-opacity: 1;background-color: rgba(5, 150, 105, var(--tw-bg-opacity));}
  &-green-700{--tw-bg-opacity: 1;background-color: rgba(4, 120, 87, var(--tw-bg-opacity));}
  &-green-800{--tw-bg-opacity: 1;background-color: rgba(6, 95, 70, var(--tw-bg-opacity));}
  &-green-900{--tw-bg-opacity: 1;background-color: rgba(6, 78, 59, var(--tw-bg-opacity));}
  &-blue-50{--tw-bg-opacity: 1;background-color: rgba(239, 246, 255, var(--tw-bg-opacity));}
  &-blue-100{--tw-bg-opacity: 1;background-color: rgba(219, 234, 254, var(--tw-bg-opacity));}
  &-blue-200{--tw-bg-opacity: 1;background-color: rgba(191, 219, 254, var(--tw-bg-opacity));}
  &-blue-300{--tw-bg-opacity: 1;background-color: rgba(147, 197, 253, var(--tw-bg-opacity));}
  &-blue-400{--tw-bg-opacity: 1;background-color: rgba(96, 165, 250, var(--tw-bg-opacity));}
  &-blue-500{--tw-bg-opacity: 1;background-color: rgba(59, 130, 246, var(--tw-bg-opacity));}
  &-blue-600{--tw-bg-opacity: 1;background-color: rgba(37, 99, 235, var(--tw-bg-opacity));}
  &-blue-700{--tw-bg-opacity: 1;background-color: rgba(29, 78, 216, var(--tw-bg-opacity));}
  &-blue-800{--tw-bg-opacity: 1;background-color: rgba(30, 64, 175, var(--tw-bg-opacity));}
  &-blue-900{--tw-bg-opacity: 1;background-color: rgba(30, 58, 138, var(--tw-bg-opacity));}
  &-indigo-50{--tw-bg-opacity: 1;background-color: rgba(238, 242, 255, var(--tw-bg-opacity));}
  &-indigo-100{--tw-bg-opacity: 1;background-color: rgba(224, 231, 255, var(--tw-bg-opacity));}
  &-indigo-200{--tw-bg-opacity: 1;background-color: rgba(199, 210, 254, var(--tw-bg-opacity));}
  &-indigo-300{--tw-bg-opacity: 1;background-color: rgba(165, 180, 252, var(--tw-bg-opacity));}
  &-indigo-400{--tw-bg-opacity: 1;background-color: rgba(129, 140, 248, var(--tw-bg-opacity));}
  &-indigo-500{--tw-bg-opacity: 1;background-color: rgba(99, 102, 241, var(--tw-bg-opacity));}
  &-indigo-600{--tw-bg-opacity: 1;background-color: rgba(79, 70, 229, var(--tw-bg-opacity));}
  &-indigo-700{--tw-bg-opacity: 1;background-color: rgba(67, 56, 202, var(--tw-bg-opacity));}
  &-indigo-800{--tw-bg-opacity: 1;background-color: rgba(55, 48, 163, var(--tw-bg-opacity));}
  &-indigo-900{--tw-bg-opacity: 1;background-color: rgba(49, 46, 129, var(--tw-bg-opacity));}
  &-purple-50{--tw-bg-opacity: 1;background-color: rgba(245, 243, 255, var(--tw-bg-opacity));}
  &-purple-100{--tw-bg-opacity: 1;background-color: rgba(237, 233, 254, var(--tw-bg-opacity));}
  &-purple-200{--tw-bg-opacity: 1;background-color: rgba(221, 214, 254, var(--tw-bg-opacity));}
  &-purple-300{--tw-bg-opacity: 1;background-color: rgba(196, 181, 253, var(--tw-bg-opacity));}
  &-purple-400{--tw-bg-opacity: 1;background-color: rgba(167, 139, 250, var(--tw-bg-opacity));}
  &-purple-500{--tw-bg-opacity: 1;background-color: rgba(139, 92, 246, var(--tw-bg-opacity));}
  &-purple-600{--tw-bg-opacity: 1;background-color: rgba(124, 58, 237, var(--tw-bg-opacity));}
  &-purple-700{--tw-bg-opacity: 1;background-color: rgba(109, 40, 217, var(--tw-bg-opacity));}
  &-purple-800{--tw-bg-opacity: 1;background-color: rgba(91, 33, 182, var(--tw-bg-opacity));}
  &-purple-900{--tw-bg-opacity: 1;background-color: rgba(76, 29, 149, var(--tw-bg-opacity));}
  &-pink-50{--tw-bg-opacity: 1;background-color: rgba(253, 242, 248, var(--tw-bg-opacity));}
  &-pink-100{--tw-bg-opacity: 1;background-color: rgba(252, 231, 243, var(--tw-bg-opacity));}
  &-pink-200{--tw-bg-opacity: 1;background-color: rgba(251, 207, 232, var(--tw-bg-opacity));}
  &-pink-300{--tw-bg-opacity: 1;background-color: rgba(249, 168, 212, var(--tw-bg-opacity));}
  &-pink-400{--tw-bg-opacity: 1;background-color: rgba(244, 114, 182, var(--tw-bg-opacity));}
  &-pink-500{--tw-bg-opacity: 1;background-color: rgba(236, 72, 153, var(--tw-bg-opacity));}
  &-pink-600{--tw-bg-opacity: 1;background-color: rgba(219, 39, 119, var(--tw-bg-opacity));}
  &-pink-700{--tw-bg-opacity: 1;background-color: rgba(190, 24, 93, var(--tw-bg-opacity));}
  &-pink-800{--tw-bg-opacity: 1;background-color: rgba(157, 23, 77, var(--tw-bg-opacity));}
  &-pink-900{--tw-bg-opacity: 1;background-color: rgba(131, 24, 67, var(--tw-bg-opacity));}

  // 背景不透明度
  &-opacity-0{--tw-bg-opacity: 0;}
  &-opacity-5{--tw-bg-opacity: 0.05;}
  &-opacity-10{--tw-bg-opacity: 0.1;}
  &-opacity-20{--tw-bg-opacity: 0.2;}
  &-opacity-25{--tw-bg-opacity: 0.25;}
  &-opacity-30{--tw-bg-opacity: 0.3;}
  &-opacity-40{--tw-bg-opacity: 0.4;}
  &-opacity-50{--tw-bg-opacity: 0.5;}
  &-opacity-60{--tw-bg-opacity: 0.6;}
  &-opacity-70{--tw-bg-opacity: 0.7;}
  &-opacity-75{--tw-bg-opacity: 0.75;}
  &-opacity-80{--tw-bg-opacity: 0.8;}
  &-opacity-90{--tw-bg-opacity: 0.9;}
  &-opacity-95{--tw-bg-opacity: 0.95;}
  &-opacity-100{--tw-bg-opacity: 1;}

  // 背景位置
  &-bottom{background-position: bottom;}
  &-center{background-position: center;}
  &-left{background-position: left;}
  &-left-bottom{background-position: left bottom;}
  &-left-top{background-position: left top;}
  &-right{background-position: right;}
  &-right-bottom{background-position: right bottom;}
  &-right-top{background-position: right top;}
  &-top{background-position: top;}
}

.hover{
  &-bg:hover{
    // 背景图像重复
    &-repeat{background-repeat: repeat;}
    &-no-repeat{background-repeat: no-repeat;}
    &-repeat-x{background-repeat: repeat-x;}
    &-repeat-y{background-repeat: repeat-y;}
    &-repeat-round{background-repeat: round;}
    &-repeat-space{background-repeat: space;}

    // 背景图像大小
    &-auto{background-size: auto;}
    &-cover{background-size: cover;}
    &-contain{background-size: contain;}

    // 背景图像固定
    &-fixed{background-attachment: fixed;}
    &-local{background-attachment: local;}
    &-scroll{background-attachment: scroll;}

    // 背景图像裁剪
    &-clip-border{background-clip: border-box;}
    &-clip-padding{background-clip: padding-box;}
    &-clip-content{background-clip: content-box;}
    &-clip-text{background-clip: text;
      -webkit-background-clip: text;}

    // 背景颜色
    &-transparent{background-color: transparent;}
    &-current{background-color: currentColor;}
    &-black {--tw-bg-opacity: 1;background-color: rgba(0, 0, 0, var(--tw-bg-opacity));}
    &-white{--tw-bg-opacity: 1;background-color: rgba(255, 255, 255, var(--tw-bg-opacity));}
    &-gray-50{--tw-bg-opacity: 1;background-color: rgba(249, 250, 251, var(--tw-bg-opacity));}
    &-gray-100{--tw-bg-opacity: 1;background-color: rgba(243, 244, 246, var(--tw-bg-opacity));}
    &-gray-200{--tw-bg-opacity: 1;background-color: rgba(229, 231, 235, var(--tw-bg-opacity));}
    &-gray-300{--tw-bg-opacity: 1;background-color: rgba(209, 213, 219, var(--tw-bg-opacity));}
    &-gray-400{--tw-bg-opacity: 1;background-color: rgba(156, 163, 175, var(--tw-bg-opacity));}
    &-gray-500{--tw-bg-opacity: 1;background-color: rgba(107, 114, 128, var(--tw-bg-opacity));}
    &-gray-600{--tw-bg-opacity: 1;background-color: rgba(75, 85, 99, var(--tw-bg-opacity));}
    &-gray-700{--tw-bg-opacity: 1;background-color: rgba(55, 65, 81, var(--tw-bg-opacity));}
    &-gray-800{--tw-bg-opacity: 1;background-color: rgba(31, 41, 55, var(--tw-bg-opacity));}
    &-gray-900{--tw-bg-opacity: 1;background-color: rgba(17, 24, 39, var(--tw-bg-opacity));}
    &-red-50{--tw-bg-opacity: 1;background-color: rgba(254, 242, 242, var(--tw-bg-opacity));}
    &-red-100{--tw-bg-opacity: 1;background-color: rgba(254, 226, 226, var(--tw-bg-opacity));}
    &-red-200{--tw-bg-opacity: 1;background-color: rgba(254, 202, 202, var(--tw-bg-opacity));}
    &-red-300{--tw-bg-opacity: 1;background-color: rgba(252, 165, 165, var(--tw-bg-opacity));}
    &-red-400{--tw-bg-opacity: 1;background-color: rgba(248, 113, 113, var(--tw-bg-opacity));}
    &-red-500{--tw-bg-opacity: 1;background-color: rgba(239, 68, 68, var(--tw-bg-opacity));}
    &-red-600{--tw-bg-opacity: 1;background-color: rgba(220, 38, 38, var(--tw-bg-opacity));}
    &-red-700{--tw-bg-opacity: 1;background-color: rgba(185, 28, 28, var(--tw-bg-opacity));}
    &-red-800{--tw-bg-opacity: 1;background-color: rgba(153, 27, 27, var(--tw-bg-opacity));}
    &-red-900{--tw-bg-opacity: 1;background-color: rgba(127, 29, 29, var(--tw-bg-opacity));}
    &-yellow-50{--tw-bg-opacity: 1;background-color: rgba(255, 251, 235, var(--tw-bg-opacity));}
    &-yellow-100{--tw-bg-opacity: 1;background-color: rgba(254, 243, 199, var(--tw-bg-opacity));}
    &-yellow-200{--tw-bg-opacity: 1;background-color: rgba(253, 230, 138, var(--tw-bg-opacity));}
    &-yellow-300{--tw-bg-opacity: 1;background-color: rgba(252, 211, 77, var(--tw-bg-opacity));}
    &-yellow-400{--tw-bg-opacity: 1;background-color: rgba(251, 191, 36, var(--tw-bg-opacity));}
    &-yellow-500{--tw-bg-opacity: 1;background-color: rgba(245, 158, 11, var(--tw-bg-opacity));}
    &-yellow-600{--tw-bg-opacity: 1;background-color: rgba(217, 119, 6, var(--tw-bg-opacity));}
    &-yellow-700{--tw-bg-opacity: 1;background-color: rgba(180, 83, 9, var(--tw-bg-opacity));}
    &-yellow-800{--tw-bg-opacity: 1;background-color: rgba(146, 64, 14, var(--tw-bg-opacity));}
    &-yellow-900{--tw-bg-opacity: 1;background-color: rgba(120, 53, 15, var(--tw-bg-opacity));}
    &-green-50{--tw-bg-opacity: 1;background-color: rgba(236, 253, 245, var(--tw-bg-opacity));}
    &-green-100{--tw-bg-opacity: 1;background-color: rgba(209, 250, 229, var(--tw-bg-opacity));}
    &-green-200{--tw-bg-opacity: 1;background-color: rgba(167, 243, 208, var(--tw-bg-opacity));}
    &-green-300{--tw-bg-opacity: 1;background-color: rgba(110, 231, 183, var(--tw-bg-opacity));}
    &-green-400{--tw-bg-opacity: 1;background-color: rgba(52, 211, 153, var(--tw-bg-opacity));}
    &-green-500{--tw-bg-opacity: 1;background-color: rgba(16, 185, 129, var(--tw-bg-opacity));}
    &-green-600{--tw-bg-opacity: 1;background-color: rgba(5, 150, 105, var(--tw-bg-opacity));}
    &-green-700{--tw-bg-opacity: 1;background-color: rgba(4, 120, 87, var(--tw-bg-opacity));}
    &-green-800{--tw-bg-opacity: 1;background-color: rgba(6, 95, 70, var(--tw-bg-opacity));}
    &-green-900{--tw-bg-opacity: 1;background-color: rgba(6, 78, 59, var(--tw-bg-opacity));}
    &-blue-50{--tw-bg-opacity: 1;background-color: rgba(239, 246, 255, var(--tw-bg-opacity));}
    &-blue-100{--tw-bg-opacity: 1;background-color: rgba(219, 234, 254, var(--tw-bg-opacity));}
    &-blue-200{--tw-bg-opacity: 1;background-color: rgba(191, 219, 254, var(--tw-bg-opacity));}
    &-blue-300{--tw-bg-opacity: 1;background-color: rgba(147, 197, 253, var(--tw-bg-opacity));}
    &-blue-400{--tw-bg-opacity: 1;background-color: rgba(96, 165, 250, var(--tw-bg-opacity));}
    &-blue-500{--tw-bg-opacity: 1;background-color: rgba(59, 130, 246, var(--tw-bg-opacity));}
    &-blue-600{--tw-bg-opacity: 1;background-color: rgba(37, 99, 235, var(--tw-bg-opacity));}
    &-blue-700{--tw-bg-opacity: 1;background-color: rgba(29, 78, 216, var(--tw-bg-opacity));}
    &-blue-800{--tw-bg-opacity: 1;background-color: rgba(30, 64, 175, var(--tw-bg-opacity));}
    &-blue-900{--tw-bg-opacity: 1;background-color: rgba(30, 58, 138, var(--tw-bg-opacity));}
    &-indigo-50{--tw-bg-opacity: 1;background-color: rgba(238, 242, 255, var(--tw-bg-opacity));}
    &-indigo-100{--tw-bg-opacity: 1;background-color: rgba(224, 231, 255, var(--tw-bg-opacity));}
    &-indigo-200{--tw-bg-opacity: 1;background-color: rgba(199, 210, 254, var(--tw-bg-opacity));}
    &-indigo-300{--tw-bg-opacity: 1;background-color: rgba(165, 180, 252, var(--tw-bg-opacity));}
    &-indigo-400{--tw-bg-opacity: 1;background-color: rgba(129, 140, 248, var(--tw-bg-opacity));}
    &-indigo-500{--tw-bg-opacity: 1;background-color: rgba(99, 102, 241, var(--tw-bg-opacity));}
    &-indigo-600{--tw-bg-opacity: 1;background-color: rgba(79, 70, 229, var(--tw-bg-opacity));}
    &-indigo-700{--tw-bg-opacity: 1;background-color: rgba(67, 56, 202, var(--tw-bg-opacity));}
    &-indigo-800{--tw-bg-opacity: 1;background-color: rgba(55, 48, 163, var(--tw-bg-opacity));}
    &-indigo-900{--tw-bg-opacity: 1;background-color: rgba(49, 46, 129, var(--tw-bg-opacity));}
    &-purple-50{--tw-bg-opacity: 1;background-color: rgba(245, 243, 255, var(--tw-bg-opacity));}
    &-purple-100{--tw-bg-opacity: 1;background-color: rgba(237, 233, 254, var(--tw-bg-opacity));}
    &-purple-200{--tw-bg-opacity: 1;background-color: rgba(221, 214, 254, var(--tw-bg-opacity));}
    &-purple-300{--tw-bg-opacity: 1;background-color: rgba(196, 181, 253, var(--tw-bg-opacity));}
    &-purple-400{--tw-bg-opacity: 1;background-color: rgba(167, 139, 250, var(--tw-bg-opacity));}
    &-purple-500{--tw-bg-opacity: 1;background-color: rgba(139, 92, 246, var(--tw-bg-opacity));}
    &-purple-600{--tw-bg-opacity: 1;background-color: rgba(124, 58, 237, var(--tw-bg-opacity));}
    &-purple-700{--tw-bg-opacity: 1;background-color: rgba(109, 40, 217, var(--tw-bg-opacity));}
    &-purple-800{--tw-bg-opacity: 1;background-color: rgba(91, 33, 182, var(--tw-bg-opacity));}
    &-purple-900{--tw-bg-opacity: 1;background-color: rgba(76, 29, 149, var(--tw-bg-opacity));}
    &-pink-50{--tw-bg-opacity: 1;background-color: rgba(253, 242, 248, var(--tw-bg-opacity));}
    &-pink-100{--tw-bg-opacity: 1;background-color: rgba(252, 231, 243, var(--tw-bg-opacity));}
    &-pink-200{--tw-bg-opacity: 1;background-color: rgba(251, 207, 232, var(--tw-bg-opacity));}
    &-pink-300{--tw-bg-opacity: 1;background-color: rgba(249, 168, 212, var(--tw-bg-opacity));}
    &-pink-400{--tw-bg-opacity: 1;background-color: rgba(244, 114, 182, var(--tw-bg-opacity));}
    &-pink-500{--tw-bg-opacity: 1;background-color: rgba(236, 72, 153, var(--tw-bg-opacity));}
    &-pink-600{--tw-bg-opacity: 1;background-color: rgba(219, 39, 119, var(--tw-bg-opacity));}
    &-pink-700{--tw-bg-opacity: 1;background-color: rgba(190, 24, 93, var(--tw-bg-opacity));}
    &-pink-800{--tw-bg-opacity: 1;background-color: rgba(157, 23, 77, var(--tw-bg-opacity));}
    &-pink-900{--tw-bg-opacity: 1;background-color: rgba(131, 24, 67, var(--tw-bg-opacity));}

    // 背景不透明度
    &-opacity-0{--tw-bg-opacity: 0;}
    &-opacity-5{--tw-bg-opacity: 0.05;}
    &-opacity-10{--tw-bg-opacity: 0.1;}
    &-opacity-20{--tw-bg-opacity: 0.2;}
    &-opacity-25{--tw-bg-opacity: 0.25;}
    &-opacity-30{--tw-bg-opacity: 0.3;}
    &-opacity-40{--tw-bg-opacity: 0.4;}
    &-opacity-50{--tw-bg-opacity: 0.5;}
    &-opacity-60{--tw-bg-opacity: 0.6;}
    &-opacity-70{--tw-bg-opacity: 0.7;}
    &-opacity-75{--tw-bg-opacity: 0.75;}
    &-opacity-80{--tw-bg-opacity: 0.8;}
    &-opacity-90{--tw-bg-opacity: 0.9;}
    &-opacity-95{--tw-bg-opacity: 0.95;}
    &-opacity-100{--tw-bg-opacity: 1;}

    // 背景位置
    &-bottom{background-position: bottom;}
    &-center{background-position: center;}
    &-left{background-position: left;}
    &-left-bottom{background-position: left bottom;}
    &-left-top{background-position: left top;}
    &-right{background-position: right;}
    &-right-bottom{background-position: right bottom;}
    &-right-top{background-position: right top;}
    &-top{background-position: top;}
  }
}

.active{
  &-bg:active{
    // 背景图像重复
    &-repeat{background-repeat: repeat;}
    &-no-repeat{background-repeat: no-repeat;}
    &-repeat-x{background-repeat: repeat-x;}
    &-repeat-y{background-repeat: repeat-y;}
    &-repeat-round{background-repeat: round;}
    &-repeat-space{background-repeat: space;}

    // 背景图像大小
    &-auto{background-size: auto;}
    &-cover{background-size: cover;}
    &-contain{background-size: contain;}

    // 背景图像固定
    &-fixed{background-attachment: fixed;}
    &-local{background-attachment: local;}
    &-scroll{background-attachment: scroll;}

    // 背景图像裁剪
    &-clip-border{background-clip: border-box;}
    &-clip-padding{background-clip: padding-box;}
    &-clip-content{background-clip: content-box;}
    &-clip-text{background-clip: text;
      -webkit-background-clip: text;}

    // 背景颜色
    &-transparent{background-color: transparent;}
    &-current{background-color: currentColor;}
    &-black {--tw-bg-opacity: 1;background-color: rgba(0, 0, 0, var(--tw-bg-opacity));}
    &-white{--tw-bg-opacity: 1;background-color: rgba(255, 255, 255, var(--tw-bg-opacity));}
    &-gray-50{--tw-bg-opacity: 1;background-color: rgba(249, 250, 251, var(--tw-bg-opacity));}
    &-gray-100{--tw-bg-opacity: 1;background-color: rgba(243, 244, 246, var(--tw-bg-opacity));}
    &-gray-200{--tw-bg-opacity: 1;background-color: rgba(229, 231, 235, var(--tw-bg-opacity));}
    &-gray-300{--tw-bg-opacity: 1;background-color: rgba(209, 213, 219, var(--tw-bg-opacity));}
    &-gray-400{--tw-bg-opacity: 1;background-color: rgba(156, 163, 175, var(--tw-bg-opacity));}
    &-gray-500{--tw-bg-opacity: 1;background-color: rgba(107, 114, 128, var(--tw-bg-opacity));}
    &-gray-600{--tw-bg-opacity: 1;background-color: rgba(75, 85, 99, var(--tw-bg-opacity));}
    &-gray-700{--tw-bg-opacity: 1;background-color: rgba(55, 65, 81, var(--tw-bg-opacity));}
    &-gray-800{--tw-bg-opacity: 1;background-color: rgba(31, 41, 55, var(--tw-bg-opacity));}
    &-gray-900{--tw-bg-opacity: 1;background-color: rgba(17, 24, 39, var(--tw-bg-opacity));}
    &-red-50{--tw-bg-opacity: 1;background-color: rgba(254, 242, 242, var(--tw-bg-opacity));}
    &-red-100{--tw-bg-opacity: 1;background-color: rgba(254, 226, 226, var(--tw-bg-opacity));}
    &-red-200{--tw-bg-opacity: 1;background-color: rgba(254, 202, 202, var(--tw-bg-opacity));}
    &-red-300{--tw-bg-opacity: 1;background-color: rgba(252, 165, 165, var(--tw-bg-opacity));}
    &-red-400{--tw-bg-opacity: 1;background-color: rgba(248, 113, 113, var(--tw-bg-opacity));}
    &-red-500{--tw-bg-opacity: 1;background-color: rgba(239, 68, 68, var(--tw-bg-opacity));}
    &-red-600{--tw-bg-opacity: 1;background-color: rgba(220, 38, 38, var(--tw-bg-opacity));}
    &-red-700{--tw-bg-opacity: 1;background-color: rgba(185, 28, 28, var(--tw-bg-opacity));}
    &-red-800{--tw-bg-opacity: 1;background-color: rgba(153, 27, 27, var(--tw-bg-opacity));}
    &-red-900{--tw-bg-opacity: 1;background-color: rgba(127, 29, 29, var(--tw-bg-opacity));}
    &-yellow-50{--tw-bg-opacity: 1;background-color: rgba(255, 251, 235, var(--tw-bg-opacity));}
    &-yellow-100{--tw-bg-opacity: 1;background-color: rgba(254, 243, 199, var(--tw-bg-opacity));}
    &-yellow-200{--tw-bg-opacity: 1;background-color: rgba(253, 230, 138, var(--tw-bg-opacity));}
    &-yellow-300{--tw-bg-opacity: 1;background-color: rgba(252, 211, 77, var(--tw-bg-opacity));}
    &-yellow-400{--tw-bg-opacity: 1;background-color: rgba(251, 191, 36, var(--tw-bg-opacity));}
    &-yellow-500{--tw-bg-opacity: 1;background-color: rgba(245, 158, 11, var(--tw-bg-opacity));}
    &-yellow-600{--tw-bg-opacity: 1;background-color: rgba(217, 119, 6, var(--tw-bg-opacity));}
    &-yellow-700{--tw-bg-opacity: 1;background-color: rgba(180, 83, 9, var(--tw-bg-opacity));}
    &-yellow-800{--tw-bg-opacity: 1;background-color: rgba(146, 64, 14, var(--tw-bg-opacity));}
    &-yellow-900{--tw-bg-opacity: 1;background-color: rgba(120, 53, 15, var(--tw-bg-opacity));}
    &-green-50{--tw-bg-opacity: 1;background-color: rgba(236, 253, 245, var(--tw-bg-opacity));}
    &-green-100{--tw-bg-opacity: 1;background-color: rgba(209, 250, 229, var(--tw-bg-opacity));}
    &-green-200{--tw-bg-opacity: 1;background-color: rgba(167, 243, 208, var(--tw-bg-opacity));}
    &-green-300{--tw-bg-opacity: 1;background-color: rgba(110, 231, 183, var(--tw-bg-opacity));}
    &-green-400{--tw-bg-opacity: 1;background-color: rgba(52, 211, 153, var(--tw-bg-opacity));}
    &-green-500{--tw-bg-opacity: 1;background-color: rgba(16, 185, 129, var(--tw-bg-opacity));}
    &-green-600{--tw-bg-opacity: 1;background-color: rgba(5, 150, 105, var(--tw-bg-opacity));}
    &-green-700{--tw-bg-opacity: 1;background-color: rgba(4, 120, 87, var(--tw-bg-opacity));}
    &-green-800{--tw-bg-opacity: 1;background-color: rgba(6, 95, 70, var(--tw-bg-opacity));}
    &-green-900{--tw-bg-opacity: 1;background-color: rgba(6, 78, 59, var(--tw-bg-opacity));}
    &-blue-50{--tw-bg-opacity: 1;background-color: rgba(239, 246, 255, var(--tw-bg-opacity));}
    &-blue-100{--tw-bg-opacity: 1;background-color: rgba(219, 234, 254, var(--tw-bg-opacity));}
    &-blue-200{--tw-bg-opacity: 1;background-color: rgba(191, 219, 254, var(--tw-bg-opacity));}
    &-blue-300{--tw-bg-opacity: 1;background-color: rgba(147, 197, 253, var(--tw-bg-opacity));}
    &-blue-400{--tw-bg-opacity: 1;background-color: rgba(96, 165, 250, var(--tw-bg-opacity));}
    &-blue-500{--tw-bg-opacity: 1;background-color: rgba(59, 130, 246, var(--tw-bg-opacity));}
    &-blue-600{--tw-bg-opacity: 1;background-color: rgba(37, 99, 235, var(--tw-bg-opacity));}
    &-blue-700{--tw-bg-opacity: 1;background-color: rgba(29, 78, 216, var(--tw-bg-opacity));}
    &-blue-800{--tw-bg-opacity: 1;background-color: rgba(30, 64, 175, var(--tw-bg-opacity));}
    &-blue-900{--tw-bg-opacity: 1;background-color: rgba(30, 58, 138, var(--tw-bg-opacity));}
    &-indigo-50{--tw-bg-opacity: 1;background-color: rgba(238, 242, 255, var(--tw-bg-opacity));}
    &-indigo-100{--tw-bg-opacity: 1;background-color: rgba(224, 231, 255, var(--tw-bg-opacity));}
    &-indigo-200{--tw-bg-opacity: 1;background-color: rgba(199, 210, 254, var(--tw-bg-opacity));}
    &-indigo-300{--tw-bg-opacity: 1;background-color: rgba(165, 180, 252, var(--tw-bg-opacity));}
    &-indigo-400{--tw-bg-opacity: 1;background-color: rgba(129, 140, 248, var(--tw-bg-opacity));}
    &-indigo-500{--tw-bg-opacity: 1;background-color: rgba(99, 102, 241, var(--tw-bg-opacity));}
    &-indigo-600{--tw-bg-opacity: 1;background-color: rgba(79, 70, 229, var(--tw-bg-opacity));}
    &-indigo-700{--tw-bg-opacity: 1;background-color: rgba(67, 56, 202, var(--tw-bg-opacity));}
    &-indigo-800{--tw-bg-opacity: 1;background-color: rgba(55, 48, 163, var(--tw-bg-opacity));}
    &-indigo-900{--tw-bg-opacity: 1;background-color: rgba(49, 46, 129, var(--tw-bg-opacity));}
    &-purple-50{--tw-bg-opacity: 1;background-color: rgba(245, 243, 255, var(--tw-bg-opacity));}
    &-purple-100{--tw-bg-opacity: 1;background-color: rgba(237, 233, 254, var(--tw-bg-opacity));}
    &-purple-200{--tw-bg-opacity: 1;background-color: rgba(221, 214, 254, var(--tw-bg-opacity));}
    &-purple-300{--tw-bg-opacity: 1;background-color: rgba(196, 181, 253, var(--tw-bg-opacity));}
    &-purple-400{--tw-bg-opacity: 1;background-color: rgba(167, 139, 250, var(--tw-bg-opacity));}
    &-purple-500{--tw-bg-opacity: 1;background-color: rgba(139, 92, 246, var(--tw-bg-opacity));}
    &-purple-600{--tw-bg-opacity: 1;background-color: rgba(124, 58, 237, var(--tw-bg-opacity));}
    &-purple-700{--tw-bg-opacity: 1;background-color: rgba(109, 40, 217, var(--tw-bg-opacity));}
    &-purple-800{--tw-bg-opacity: 1;background-color: rgba(91, 33, 182, var(--tw-bg-opacity));}
    &-purple-900{--tw-bg-opacity: 1;background-color: rgba(76, 29, 149, var(--tw-bg-opacity));}
    &-pink-50{--tw-bg-opacity: 1;background-color: rgba(253, 242, 248, var(--tw-bg-opacity));}
    &-pink-100{--tw-bg-opacity: 1;background-color: rgba(252, 231, 243, var(--tw-bg-opacity));}
    &-pink-200{--tw-bg-opacity: 1;background-color: rgba(251, 207, 232, var(--tw-bg-opacity));}
    &-pink-300{--tw-bg-opacity: 1;background-color: rgba(249, 168, 212, var(--tw-bg-opacity));}
    &-pink-400{--tw-bg-opacity: 1;background-color: rgba(244, 114, 182, var(--tw-bg-opacity));}
    &-pink-500{--tw-bg-opacity: 1;background-color: rgba(236, 72, 153, var(--tw-bg-opacity));}
    &-pink-600{--tw-bg-opacity: 1;background-color: rgba(219, 39, 119, var(--tw-bg-opacity));}
    &-pink-700{--tw-bg-opacity: 1;background-color: rgba(190, 24, 93, var(--tw-bg-opacity));}
    &-pink-800{--tw-bg-opacity: 1;background-color: rgba(157, 23, 77, var(--tw-bg-opacity));}
    &-pink-900{--tw-bg-opacity: 1;background-color: rgba(131, 24, 67, var(--tw-bg-opacity));}

    // 背景不透明度
    &-opacity-0{--tw-bg-opacity: 0;}
    &-opacity-5{--tw-bg-opacity: 0.05;}
    &-opacity-10{--tw-bg-opacity: 0.1;}
    &-opacity-20{--tw-bg-opacity: 0.2;}
    &-opacity-25{--tw-bg-opacity: 0.25;}
    &-opacity-30{--tw-bg-opacity: 0.3;}
    &-opacity-40{--tw-bg-opacity: 0.4;}
    &-opacity-50{--tw-bg-opacity: 0.5;}
    &-opacity-60{--tw-bg-opacity: 0.6;}
    &-opacity-70{--tw-bg-opacity: 0.7;}
    &-opacity-75{--tw-bg-opacity: 0.75;}
    &-opacity-80{--tw-bg-opacity: 0.8;}
    &-opacity-90{--tw-bg-opacity: 0.9;}
    &-opacity-95{--tw-bg-opacity: 0.95;}
    &-opacity-100{--tw-bg-opacity: 1;}

    // 背景位置
    &-bottom{background-position: bottom;}
    &-center{background-position: center;}
    &-left{background-position: left;}
    &-left-bottom{background-position: left bottom;}
    &-left-top{background-position: left top;}
    &-right{background-position: right;}
    &-right-bottom{background-position: right bottom;}
    &-right-top{background-position: right top;}
    &-top{background-position: top;}
  }
}